<template>
  <div class="header">
    <router-link to="/">
      <div class="header-left">
        <div class="iconfont header-icon">&#xe6b4;</div>
      </div>
    </router-link>
    <div class="header-title">城市选择</div>
  </div>
</template>

<script>
export default {
  name: 'CityHeader'
}
</script>

<style lang="stylus" scoped>
@import '~styles/variable.styl'
  .header
    height $headerHeight
    background-color $bgColor
    position relative
    .header-left
      width 64px
      line-height $headerHeight
      text-align center
      color #fff
      position absolute
      top 50%
      left 10px
      transform translateY(-50%)
      .header-icon
        vertical-align middle
        color #fff
        height 100%
        font-size 24px
        width 100%
    .header-title
      position absolute
      top 50%
      left 50%
      font-size 30px
      transform translate(-50%,-50%)
      color #ffffff
</style>
